<template>
  <div>
    <!-- <div class="page-title">角色授权</div> -->
    <div class="page-content" >
      <el-select
        v-model="sysrole"
        placeholder="请选择角色"
        clearable
        filterable
      >
        <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        native-type="submit"
        icon="el-icon-search"
        @click="handleSearch"
        >查询</el-button
      >

      <router-link
        :to="{ name: 'AuthorizationEdit', params: { id: this.sysrole } }">
        <el-button type="primary">授权</el-button>
      </router-link>
      <!-- <router-link :to="{}" v-else>
            <el-button type="primary" :disabled="true">授权</el-button>
          </router-link> -->
    </div>
    <div>
      <el-tree
        :data="checkItem"
        :default-expand-all="true"
        node-key="id"
        ref="tree"
        :props="{label:'name',children:'child'}"
        highlight-current
      ></el-tree>
    </div>
  </div>
</template>

<script>
// import { GetRoleDictionary } from "../../../services/dictionary"
// import { GetRoleTree } from "../../../services/role_module"
import { GetRoles } from "@/api/module/userManagement";
import { getAllNavigation } from "@/api/module/roleAuthorize";

export default {
  data() {
    return {
      loading: false,
      options: [],
      sysrole: "",
      checkItem: [],
    };
  },
  mounted() {
    this.getRoleData();
    // this.getRolesDict()
  },
  methods: {
    // 获取角色
    getRoleData() {
      // let params = {
      //   label: '角色'
      // }
      GetRoles()
        .then(res => {
          this.options = res.data.data;
        })
        .catch(() => {});
    },
    handleSearch() {
      this.handleGetTreeData();
    },
    // getRolesDict() {
    //   GetRoleDictionary()
    //     .then((res) => {
    //       this.roles = res.data.list
    //     })
    //     .catch((err) => {
    //       this.$message.error(err.message)
    //     })
    // },
    handleGetTreeData() {
      getAllNavigation(this.sysrole).then(res => {
        console.log(1, res);
        this.checkItem = res.data.data;
      });
    }
  }
};
</script>

<style scoped>
.page-content{padding: 20px;}
</style>
